<template>
	<view class="files-box">
		<view class="files-all" v-if="type == 'all'" :style="{ maxWidth: width }">
			<view class="files" :key="key">
				<view class="files-inner" v-for="(item, index) in fileList" :key="index">
					<label class="files-name clamp">{{ item.name }}</label>
					<label class="del" @click="delfile(item)">删除</label>
				</view>
			</view>

			<button class="btn" type="primary" @click="uploadFile"><text class="add"></text></button>
			<slot></slot>
		</view>

		<view class="files-mix" v-if="type == 'image' || type == 'video'">
			<view class="image" v-for="(item, index) in imgList" :key="index" @click="delImg(item)">
				<image class="img" :src="item.src || item.path" mode="aspectFill"></image>
				<u-icon class="del" name="close-circle-fill" color="#e5231a" size="28"></u-icon>
			</view>

			<view class="line"></view>
			<button class="btn" v-if="imgList.length < 9" type="primary" @click="uploadMix"><text class="add"></text></button>
			<slot></slot>
		</view>

		<view class="files-audio" v-if="type == 'audio'" :style="{ maxWidth: width }">
			<view class="files" :key="key">
				<view class="files-inner" v-for="(item, index) in audioList" :key="index">
					<label class="files-name clamp">{{ item.name }}</label>
					<label class="del" @click="delaudio(item)">删除</label>
				</view>
			</view>

			<uni-record :maximum="60" @confirm="saveRecord"><view class="add"></view></uni-record>
			<slot></slot>
		</view>
	</view>
</template>

<script>
import uniRecord from '@/components/uni-record.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniRecord
	},
	props: {
		id: {
			type: String,
			default: 'file'
		},
		url: {
			type: String,
			default: ''
		},
		limit: {
			type: Number,
			default: 9
		},
		type: {
			type: String,
			default: 'all'
		},
		width: {
			type: String,
			default: '500rpx'
		},
		formData: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			key: -1,
			fileInfo: [],
			imgList: [],
			audioList: []
		};
	},
	mounted() {
		this.handelFiles();
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		uploadMix() {
			let media = 'image';
			if (this.type == 'video') {
				media = 'video';
			}
			uni.chooseMedia({
				count: this.limit,
				sizeType: ['compressed'],
				mediaType: media,
				sourceType: ['album', 'camera'],
				success: res => {
					console.log(res);
					// this.imgList = this.imgList.concat(res.tempFiles);
					res.tempFiles.forEach(item => {
						if (!item.path) {
							item.path = item.tempFilePath;
						}
						if (!item.name) {
							item.name = item.path.slice(9);
						}
						this.checkImg(item);
						// this.uploadAPI(item);
					});
				}
			});
		},
		uploadFile() {
			uni.chooseMessageFile({
				count: this.limit,
				type: this.type,
				success: res => {
					res.tempFiles.forEach(item => {
						this.uploadAPI(item);
					});
				}
			});
		},
		checkImg(item) {
			uni.showLoading({
				title: '加载中...'
			});
			uni.uploadFile({
				url: this.$baseUrl + '/msg_sec_check/image',
				filePath: item.path,
				name: item.name ? item.name : item.path,
				header: {
					Authorization: this.userInfo.Authorization
				},
				success: res => {
					uni.hideLoading();
					let data = JSON.parse(res.data);
					if (data && data.data) {
						if (this.imgList.length >= this.limit) {
							this.imgList.shift();
						}
						console.log(item);
						this.uploadAPI(item);
						if (item.thumbTempFilePath) {
							item.path = item.thumbTempFilePath;
						}
						this.imgList.push(item);
					} else {
						this.$msg('包含违规内容！');
					}
				},
				fail: res => {
					uni.hideLoading();
					this.$msg('上传失败！');
				}
			});
		},
		saveRecord(e) {
			console.log(e);
			if (!e) {
				this.$msg('没有内容！');
				return false;
			}
			if (this.audioList.length >= this.limit) {
				this.audioList.shift();
			}
			console.log(e);
			let item = {
				name: e.slice(9),
				path: e
			};
			this.uploadAPI(item);
			this.audioList.push(item);
		},
		uploadAPI(item) {
			uni.showLoading({
				title: '加载中...'
			});
			uni.uploadFile({
				url: this.url ? this.url : this.$baseUrl + '/file/upload',
				filePath: item.path,
				name: item.name ? item.name : item.path,
				header: {
					Authorization: this.userInfo.Authorization
				},
				success: res => {
					uni.hideLoading();
					let data = JSON.parse(res.data);

					if (data && data.data[0]) {
						let file = {
							name: data.data[0].fileNameW ? data.data[0].fileNameW : data.data[0].name,
							path: data.data[0].path,
							size: data.data[0].size
						};
						this.fileInfo = this.fileList;
						if (this.imgList.length >= this.limit && this.audio == 'image') {
							this.fileInfo.shift();
						}
						if (this.imgList.length >= this.limit && this.audio == 'video') {
							this.fileInfo.shift();
						}
						if (this.audioList.length >= this.limit && this.audio == 'audio') {
							this.fileInfo.shift();
						}
						file && this.fileInfo.push(file);
						this.$store.commit('filePush', this.fileInfo);
						this.key--;
					} else {
						this.$msg('上传失败！');
					}
				},
				fail: res => {
					uni.hideLoading();
					this.$msg('上传失败！');
				}
			});
		},
		delfile(item) {
			this.fileInfo = this.fileList;
			this.fileInfo.splice(this.fileInfo.indexOf(item), 1);
			this.imgList.splice(this.fileInfo.indexOf(item), 1);
			this.$store.commit('filePush', this.fileInfo);
			this.key--;
		},
		delImg(item) {
			this.fileInfo = this.fileList;
			this.fileInfo.splice(this.imgList.indexOf(item), 1);
			this.imgList.splice(this.imgList.indexOf(item), 1);
			this.$store.commit('filePush', this.fileInfo);
			this.key--;
		},
		delaudio(item) {
			this.fileInfo = this.fileList;
			this.fileInfo.splice(this.audioList.indexOf(item), 1);
			this.audioList.splice(this.audioList.indexOf(item), 1);
			this.$store.commit('filePush', this.fileInfo);
			this.key--;
		},
		handelFiles() {
			let imgType = 'bmp,jpg,jpeg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp';
			let audioType = 'm4a,wav,mp3,aac';
			this.fileList.forEach(item => {
				if (!item.name) {
					return false;
				}

				let name = item.name.split('.');
				if (imgType.indexOf(name[name.length - 1].toLowerCase()) != -1) {
					if (item.id) {
						item.src = this.$baseUrl + '/file/download/' + item.id;
					}
					this.imgList.push(item);
				}
				if (audioType.indexOf(name[name.length - 1].toLowerCase()) != -1) {
					this.audioList.push(item);
				}
			});
		},
		linksImg(path) {
			return path;
		},
		previewImage(path, index) {
			let urls = [];
			this.imgList.forEach(item => {
				urls.push(item.path);
			});
			uni.previewImage({
				current: path,
				urls: urls
			});
		}
	}
};
</script>

<style lang="scss">
.files-all,
.files-audio {
	display: flex;
	flex-wrap: wrap;
	max-width: 500rpx;

	.files {
		width: 100%;
	}
}

.files-mix {
	display: flex;
	flex-wrap: wrap;
	margin-top: -20rpx;

	.btn {
		margin-top: 20rpx;
	}

	.image {
		position: relative;
	}

	.del {
		position: absolute;
		right: 5rpx;
		top: 5rpx;
		z-index: 10;
	}

	.img {
		margin: 20rpx 20rpx 0 0;
		width: 120rpx;
		height: 120rpx;
	}
}

.files-inner {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10rpx;
	font-size: 16px;
	text-align: left;
}

.files-name {
	padding-right: 10rpx;
	width: 90%;
	flex: 1;
	font-size: 16px;
	color: #808080;
}

.del {
	flex-shrink: 0;
	color: #ce1617;
}

.line {
	flex-shrink: 0;
	width: 100%;
}

.btn {
	position: relative;
	display: flex;
	background: #fff;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 120rpx;
	height: 120rpx;
	margin: 0;
	padding: 0;
}

.add {
	width: 120rpx;
	height: 120rpx;
	background: #fff url($staticUrl+'/static/img/add.png') no-repeat center center;
	background-size: 120rpx;
}
</style>
